<template>
  <basic-dialog
    title="关联商品"
    width="55%"
    :visible="visible"
    :show-close="false"
    :showFooter="false"
  >
    <BasicForm
      ref="formData"
      formItemWidth="80px"
      isBtnBarSingleRow
      defaultExpandStatus
      :isScalingBtn="false"
      :hasQueryPermission=false
      :formColumns="formItems"
      :dataSource="formData"
      :handleSearchForm="handleQueryForm"
      @getFormData="getFormData"
    >
      <template slot="extensionActions">
        <el-button type="primary" @click="handleBatchLinked">批量关联</el-button>
        <el-button @click="handleCancel">取消</el-button>
      </template>
    </BasicForm>
    <SkusTable
      class="table-wrap"
      showSelectCol
      showPagination
      :loading="TableInfo.loading"
      :columns="TableInfo.columns"
      :dataSource="TableInfo.list"
      :pagination="pagination"
      :total="pagination.total"
      :selectionChange="TableInfo.setSelection"
      :pageSizes="pageSizes"
      @pageChange="handlePageChange"
      @pageSizeSelect="handlePageSizeChange"
    />
  </basic-dialog>
</template>
<script>
import BasicDialog from '@/components/BasicDialog';
import BasicForm from '@/components/BasicForm';
import SkusTable from '@/components/skusTable';
import skusPage from '@/mixins/commodity/skusPage';
import { getInitFormData, TableInfo } from '@/utils/getUtils';
import { FORM_ITEMS, TABLE_COLUMNS } from './constants';
import { getSkuPagerService } from '@/api/commodity/commodityInfoEdit/saleAreaAdd';
export default {
  mixins: [skusPage],
  components: {
    BasicDialog,
    BasicForm,
    SkusTable
  },
  props: {
    visible: {
      type: Boolean,
      default: false
    },
  },
  data () {
    return {
      formItems: FORM_ITEMS,
      formData: getInitFormData(FORM_ITEMS),
      TableInfo: new TableInfo({ columns: TABLE_COLUMNS }),
      pageSizes: [10, 100, 1000]
    }
  },
  watch: {
    visible (val) {
    }
  },
  methods: {
    async getTableData () {
      const data = {
        ...this.formData,
        ...this.paginationParams
      }
      const res = await getSkuPagerService(data, this.TableInfo.setLoading)
      if (res?.retData) {
        this.TableInfo.setList(res.retData?.results)
        this.setTotalNum(res.retData.totalNum)
      }
    },
    // 批量关联
    handleBatchLinked () {
      this.$emit('getResults', this.TableInfo.selection)
      this.handleCancel()
      this.clearAllData()
    },
    // 取消
    handleCancel () {
      this.$emit('update:visible', false)
    },
    // 清空状态
    clearAllData () {
      // eslint-disable-next-line no-unused-expressions
      this.$refs?.formData?.handleResetForm() // 表单清空
      this.TableInfo.clearList() // 表格清空
      this.pagination.pageNum = 1 // 当前页码
      this.setTotalNum(0) // 总条数
    },
  }
}
</script>
<style lang="less" scoped>
.table-wrap {
  margin-top: 10px;
}
</style>
